<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6">
            <a-form-item label="保管期限">
              <j-dict-select-tag
                type="list"
                v-model="baoGuanQiXian"
                dictCode="BaoGuanQiXian"
                placeholder="请选择保管期限"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <a-form-item label="归档年度">
              <j-dict-select-tag
                type="list"
                v-model="nianDu"
                dictCode="NianDu"
                placeholder="请选择归档年度"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSubmit" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
          <!-- <a-col :sm="24">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSubmit" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </span>
          </a-col>-->
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-tabs :activeKey="keys" @change="callback">
        <a-tab-pane :key="1" tab="卷">
          <a-button @click="tiQu" type="primary">提取</a-button>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="ClearSelected">清空</a>
          </div>
          <a-table
            :columns="columns1"
            :data-source="listData"
            bordered
            rowKey="id"
            :loading="loading"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @change="handleTableChange"
          >
            <span slot="yeshu" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
              <router-link :to="{name:'juanjian',query:{id:record.id}}">{{text}}</router-link>
            </span>
            <span slot="detail" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
              <a @click="chaKan(record)">{{text}}</a>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="盒">
          <a-button @click="tiQu" type="primary">提取</a-button>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="ClearSelected">清空</a>
          </div>
          <a-table
            :columns="columns2"
            :data-source="listData"
            bordered
            rowKey="id"
            :loading="loading"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @change="handleTableChange"
          >
            <span slot="yeshu" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
              <router-link :to="{name:'juanjian',query:{id:record.id}}">{{text}}</router-link>
            </span>
            <span slot="detail" slot-scope="text, record" style="color: #1890FF;cursor: pointer;">
              <a @click="chaKan(record)">{{text}}</a>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal :width="800" :title="ModalText" :visible="visible" @cancel="handleCancel">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12">
            <a-form-item label="目录号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="true" v-decorator="['muLuHao']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="立档单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-depart
                :disabled="true"
                v-decorator="[
                  'liDangDanWei',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择立档单位'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
              ></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="归档机构" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-depart
                :disabled="true"
                v-decorator="[
                  'guiDangJiGou',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择归档机构'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
              ></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="归档年度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="[
                  'nianDu',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择归档年度'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
                dictCode="NianDu"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="保管期限" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="[
                  'baoGuanQiXian',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择保管期限'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
                dictCode="BaoGuanQiXian"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="档号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="true" v-decorator="['dangHao']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12" v-if="keys==1">
            <a-form-item label="案卷号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="true" v-decorator="['anJuanHao']" />
            </a-form-item>
          </a-col>
          <a-col :md="12" v-if="keys==2">
            <a-form-item label="盒号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="true" v-decorator="['heHao']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="密级" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="[
                  'miJi',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择密级'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
                dictCode="MiJi"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="立卷日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date
                :disabled="true"
                v-decorator="[
                  'liJuanRiQi',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择立卷日期'
                      }
                    ]
                  }
                ]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="页数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :disabled="true" style="width: 100%" v-decorator="['yeShu']" />
            </a-form-item>
          </a-col>
          <a-col :md="12" v-if="keys==1">
            <a-form-item label="题名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="true"
                v-decorator="['tiMing',{
                    rules: [
                      {
                        required: true,
                        message: '题名不能为空'
                      }
                    ]
                  }]"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12" v-if="keys==2">
            <a-form-item label="盒类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="['heLeiXing',{
            rules: [
              {
                required: true,
                message: '请选择盒类型',
              },
            ],
          }]"
                :trigger-change="true"
                dictCode="HeLeiXing"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="日期(起始)" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date
                :disabled="true"
                v-decorator="['riQiQiShi',
                {
                    rules: [
                      {
                        required: true,
                        message: '请选择日期(起始)'
                      }
                    ]
                  }]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="日期(终止)" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date
                :disabled="true"
                v-decorator="['riQiZhongZhi',
                {
                    rules: [
                      {
                        required: true,
                        message: '请选择日期(终止)'
                      }
                    ]
                  }]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="全宗号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="true"
                v-decorator="[
                  'quanZongHao',
                  {
                    rules: [
                      {
                        required: true,
                        message: '全宗号不能为空'
                      }
                    ]
                  }
                ]"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="存放位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="true" v-decorator="['cunFangWeiZhiMingCheng']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="流转状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="['liuZhuanZhuangTai']"
                :trigger-change="true"
                dictCode="liuZhuanZhuangTai"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item label="上架状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="true"
                type="list"
                v-decorator="['shangJiaZhuangTai']"
                :trigger-change="true"
                dictCode="ShangJiaZhuangTai"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <a-form-item label="备注" v-bind="formItemLayout">
              <a-textarea :disabled="true" v-decorator="['beiZhu']" rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
export default {
  name: 'YiJiaoTQList',
  components: {
    JDate,
    JDictSelectTag,
    JSelectDepart,
  },
  data() {
    return {
      ModalText: '详情',
      visible: false,
      // tab
      keys: 1,
      // 列表
      listData: [],
      selectedRowKeys: [],
      loading: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      // 表头
      columns1: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '题名',
          align: 'center',
          dataIndex: 'tiMing',
          scopedSlots: { customRender: 'detail' },
        },
        {
          title: '案卷号',
          align: 'center',
          dataIndex: 'anJuanHao',
        },
        {
          title: '保管期限',
          align: 'center',
          dataIndex: 'baoGuanQiXian_dictText',
        },
        {
          title: '归档机构',
          align: 'center',
          dataIndex: 'jiGouMingCheng',
        },
        {
          title: '归档年度',
          align: 'center',
          dataIndex: 'nianDu',
        },
        {
          title: '卷内件',
          align: 'center',
          dataIndex: 'count',
          scopedSlots: { customRender: 'yeshu' },
        },
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '盒号',
          align: 'center',
          dataIndex: 'heHao',
          scopedSlots: { customRender: 'detail' },
        },
        {
          title: '保管期限',
          align: 'center',
          dataIndex: 'baoGuanQiXian_dictText',
        },
        {
          title: '归档机构',
          align: 'center',
          dataIndex: 'jiGouMingCheng',
        },
        {
          title: '归档年度',
          align: 'center',
          dataIndex: 'nianDu',
        },
        {
          title: '盒内件',
          align: 'center',
          dataIndex: 'heNeiJian',
          scopedSlots: { customRender: 'yeshu' },
        },
      ],
      pagination: { pageSize: 10, current: 1, total: 0, showTotal: (total, a, b, c) => `总共 ${total} 条数据` },
      search: {},
      form: this.$form.createForm(this, { name: 'register' }),
      toggleSearchStatus: false,
      baoGuanQiXian: '',
      nianDu: '',
    }
  },
  created() {
    this.listJuan()
  },
  methods: {
    // 卷列表
    listJuan(values) {
      getAction(`/daJuan/list?liuZhuanZhuangTai=${8}`, { ...values }).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.loading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
        }
      })
    },
    // 盒列表
    listHe(values) {
      getAction(`/daHe/list?liuZhuanZhuangTai=${8}`, { ...values }).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.loading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
        }
      })
    },
    // 复选框
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 清空
    ClearSelected() {
      this.selectedRowKeys = []
    },
    // tab列表
    callback(key) {
      this.search.pageNo = 1
      this.pagination.current = 1
      this.selectedRowKeys = []
      this.keys = key
      if (key == 1) {
        this.listJuan(this.search)
      } else if (key == 2) {
        this.listHe(this.search)
      }
    },
    // 分页
    handleTableChange(pagination, filters, sorter) {
      this.search.pageNo = pagination.current
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      if (this.keys == 1) {
        this.listJuan(this.search)
      } else if (this.keys == 2) {
        this.listHe(this.search)
      }
    },
    // 查询
    handleSubmit(e) {
      let values = {}
      values.nianDu = this.nianDu
      values.baoGuanQiXian = this.baoGuanQiXian
      this.search = values
      this.search.pageNo = 1
      this.pagination.current = 1
      if (this.keys == 1) {
        this.listJuan(this.search)
      } else if (this.keys == 2) {
        this.listHe(this.search)
      }
    },
    // 重置
    searchReset() {
      this.search = {}
      this.nianDu = ''
      this.baoGuanQiXian = ''
      this.search.pageNo = 1
      this.pagination.current = 1
      this.form.resetFields()
      if (this.keys == 1) {
        this.listJuan()
      } else if (this.keys == 2) {
        this.listHe()
      }
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // 提取
    tiQu() {
      if (this.selectedRowKeys.length > 0) {
        let ids = this.selectedRowKeys.join()
        this.$router.push({ path: '/yijiao-dengji', query: { ids: ids, keys: this.keys } })
      } else {
        this.$message.error('请选择要移交的数据!')
      }
    },
    // 弹出框
    chaKan(record) {
      this.form.resetFields()
      this.visible = true
      const {
        form: { setFieldsValue },
      } = this
      const data = record
      this.$nextTick(() => {
        setFieldsValue({
          quanZongHao: data.quanZongHao,
          muLuHao: data.muLuHao,
          liDangDanWei: data.liDangDanWei,
          nianDu: data.nianDu,
          baoGuanQiXian: data.baoGuanQiXian,
          anJuanHao: data.anJuanHao,
          dangHao: data.dangHao,
          liJuanRiQi: data.liJuanRiQi,
          yeShu: data.yeShu,
          tiMing: data.tiMing,
          miJi: data.miJi,
          riQiQiShi: data.riQiQiShi,
          riQiZhongZhi: data.riQiZhongZhi,
          beiZhu: data.beiZhu,
          liuZhuanZhuangTai: data.liuZhuanZhuangTai,
          cunFangWeiZhiMingCheng: data.cunFangWeiZhiMingCheng,
          shangJiaZhuangTai: data.shangJiaZhuangTai,
          heHao: data.heHao,
          heLeiXing: data.heLeiXing,
        })
      })
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>

<style lang="less">
</style>